<template>
  <div class="points-page container">
    <h1>积分商城</h1>
    <div class="points-info">
      <div class="points-balance">
        <span class="points-icon">🌟</span>
        <div class="points-text">
          <div class="points-label">我的积分</div>
          <div class="points-value">1,250</div>
        </div>
      </div>
      <button class="refresh-button">更新积分</button>
    </div>
    
    <div class="points-categories">
      <button class="category-tab active">全部</button>
      <button class="category-tab">环保商品</button>
      <button class="category-tab">虚拟商品</button>
      <button class="category-tab">限时折扣</button>
    </div>
    
    <div class="products-grid">
      <div class="product-card">
        <div class="product-image green-gradient">
          <div class="product-badge">热门</div>
        </div>
        <div class="product-info">
          <h3>可降解购物袋套装</h3>
          <p class="product-description">环保材质，可重复使用100次以上</p>
          <div class="product-footer">
            <div class="product-price">200 积分</div>
            <button class="redeem-button">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="product-card">
        <div class="product-image blue-gradient">
          <div class="product-badge">新品</div>
        </div>
        <div class="product-info">
          <h3>竹制餐具套装</h3>
          <p class="product-description">含刀叉勺筷子，天然材质不含塑料</p>
          <div class="product-footer">
            <div class="product-price">350 积分</div>
            <button class="redeem-button">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="product-card">
        <div class="product-image purple-gradient">
        </div>
        <div class="product-info">
          <h3>数字徽章：地球守护者</h3>
          <p class="product-description">完成三个挑战后可获得的专属徽章</p>
          <div class="product-footer">
            <div class="product-price">100 积分</div>
            <button class="redeem-button">兑换</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PointsView',
  data() {
    return {
      
    }
  }
}
</script>

<style scoped>
.points-page {
  padding: 20px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.points-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.points-balance {
  display: flex;
  align-items: center;
}

.points-icon {
  font-size: 36px;
  margin-right: 15px;
}

.points-label {
  font-size: 14px;
  color: #666;
}

.points-value {
  font-size: 28px;
  font-weight: 700;
  color: #4CAF50;
}

.refresh-button {
  background-color: transparent;
  border: 1px solid #4CAF50;
  color: #4CAF50;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}

.refresh-button:hover {
  background-color: rgba(76, 175, 80, 0.1);
}

.points-categories {
  display: flex;
  margin: 20px 0;
  border-bottom: 1px solid #eee;
}

.category-tab {
  background: none;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  position: relative;
}

.category-tab.active {
  color: #4CAF50;
}

.category-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4CAF50;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.product-image {
  height: 180px;
  position: relative;
}

.green-gradient {
  background: linear-gradient(135deg, #43a047 0%, #1de9b6 100%);
}

.blue-gradient {
  background: linear-gradient(135deg, #1976d2 0%, #64b5f6 100%);
}

.purple-gradient {
  background: linear-gradient(135deg, #6a1b9a 0%, #ce93d8 100%);
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff5722;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.product-info {
  padding: 15px;
}

.product-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.product-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-weight: 700;
  color: #4CAF50;
}

.redeem-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.redeem-button:hover {
  background-color: #388e3c;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .points-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .refresh-button {
    margin-top: 15px;
    align-self: flex-end;
  }
  
  .points-categories {
    overflow-x: auto;
    padding-bottom: 5px;
  }
}
</style> 